<template>
	<view class="page">
		<view class="header flex_c">
			<u-icon name="checkmark-circle-fill" color="#1FC129" size="96rpx"></u-icon>
			
			<view class="header-title">加入成功</view>
			
			<view class="str">
				{{ str }}
			</view>
			
			<button @click="onDownLoad">下载超圈app</button>
			
		</view>
		
		<view class="title flex_r_around">
			<view class="flex_center">
				<view class="line left">
					
				</view>
				
				<text>使用教程 </text>
				
				<view class="line right">
					
				</view>
			</view>
		</view>
		
		<view class="image flex_r_around">
			<image :src="$util.prefix('newstore/download_teach.png')" mode="aspectFill"></image>
		</view>
		
		<u-popup :show="show_outside" @close="show_outside = false" mode="top">
			<view class="openout flex_r_between">
				<view class="left">
					<image :src="$util.prefix('index/logo.png')" mode="aspectFill"></image>
					<text>安装超圈</text>
					<view class="flex_center">
						<i>点击右上角</i>
						<u-icon name="more-dot-fill" color="#666666" size="40rpx"></u-icon>
					</view>
					<view>
						<i>选择在浏览器中打开</i>
					</view>
				</view>
		
				<view class="right">
					<image :src="$util.prefix('index/h5_to.png')" mode="aspectFill"></image>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				str: '',
				
				is_micromessenger: true,
				show_outside: false,
				
				an_url: '',
				ios_url: '',
			}
		},
		methods: {
			onDownLoad() {
				if (this.is_micromessenger) {
					this.show_outside = true;
				} else {
					var type = uni.getSystemInfoSync().platform;
					if (type == 'ios') {
						window.open(this.ios_url)
					} else {
						window.open(this.an_url)
					}
				}
			},
			
			getDownLoadUrl() {
				this.$post("/index/getApkVersion").then(res => {
					this.an_url = res.data.app_path
					this.ios_url = res.data.ios_path
				})
			},
		},
		
		onLoad(option) {
			this.str = option.str || '';
			this.getDownLoadUrl();
			
			let ua = navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				this.is_micromessenger = true;
			} else {
				this.is_micromessenger = false;
				this.download_show = true;
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		padding: 64rpx 54rpx;
		background: #FFFFFF;
		min-height: 100vh;
	}
	
	.header {
		border-bottom: 2rpx dashed #CCCCCC;
		padding-bottom: 96rpx;
		margin-bottom: 90rpx;
		
		.header-title {
			font-weight: 600;
			font-size: 40rpx;
			color: #131313;
			line-height: 56rpx;
			margin: 32rpx 0 12rpx;
		}
		
		.str {
			font-size: 24rpx;
			color: #666666;
			line-height: 34rpx;
		}
		
		button {
			width: 400rpx;
			height: 88rpx;
			background: #FD2A53;
			border-radius: 44rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			margin-top: 56rpx;
		}
	}
	
	.title {
		.line {
			width: 96rpx;
			height: 8rpx;
			border-radius: 4rpx;
		}
		
		.left {
			background: linear-gradient( 270deg, #FF548B 0%, rgba(253,42,83,0) 100%);
		}
		
		.right {
			background: linear-gradient( 90deg, #FF548B 0%, rgba(253,42,83,0) 100%);
		}
		
		text {
			font-weight: 500;
			font-size: 40rpx;
			color: #FD2A53;
			line-height: 56rpx;
			margin: 0 24rpx;
		}
	}
	
	.image {
		margin-top: 56rpx;
		image {
			width: 638rpx;
			height: 408rpx;
		}
	}
	
	.openout {
		background: rgba(255, 255, 255, .8);
		width: 100vw;
		padding: 32rpx 64rpx 32rpx 72rpx;
	
		.left {
			image {
				width: 174rpx;
				height: 66rpx;
				display: block;
				margin-bottom: 20rpx;
			}
	
			view {
				i {
					font-size: 28rpx;
					color: #666666;
					font-style: normal;
				}
			}
	
			text {
				font-size: 28rpx;
				color: #666666;
				display: block;
			}
		}
	
		.right {
			width: 90rpx;
			height: 188rpx;
	
			image {
				width: 90rpx;
				height: 188rpx;
				display: block;
			}
		}
	
	}
	
	
</style>
